<template>
  <div>
    我是父组件===ref获取子组件的值 {{ apptext }}
    <hr />
    <refs ref="readref"></refs>
    <hr />
    <h1 v-if="flag" ref="Domh1">我是h1元素</h1>
    <button @click="btn">按钮</button>
  </div>
</template>
<script>
import refs from './ref/ref.vue'
export default {
  name: '',
  components: { refs },
  data () {
    return {
      apptext: '',
      flag: false
    }
  },
  created () {
  },
  computed: {

  },
  methods: {
    btn () {
      this.flag = !this.flag
      //$nextTick异步任务,可以等待所有Dom元素渲染完毕后,再执行函数体
      this.$nextTick(() => {
        console.log(this.$refs.Domh1);
      })

    }
  },
  mounted () {
    // console.log(this.$ref);
    // console.log(this.$refs.readref.text);
    // this.$refs.readref.say()
    // this.apptext = this.$refs.readref.text
    //使用ref,然后在this.$refs中可以找到设置的属性名,配套使用获取dom元素
    // console.log(this.$refs.Domh1);
  }
}
</script>
<style lang='less'  scoped>
</style>
